<template>
  <el-dialog @close="close" v-model="dialogFormVisible" :title="title">
    <el-form ref="dialogForm" :model="dialogFormData">
      <el-form-item>
        <slot name="upload"></slot>
      </el-form-item>
      <el-form-item 
      v-for="(v, k) in dialogFormData" 
      :key="k" 
      :label="v.label" 
      :label-width="formLabelWidth"
        :prop="(k + '.value')"
        :rules="{
          required: true,
          trigger: 'blur',
          message: v.label + '不能为空'
        }">
        <el-input v-model="v.value" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button @click="confirm(dialogForm)" type="primary">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, watchPostEffect, toRefs } from "vue"

// 1.根据传入的数据，自动创建出form表单元素，现在默认使用input
// 2.表单需要具备能够检验属性的功能
// 3.表单通过和不通过，可以回调对应的方法
// 4.控制显示隐藏的属性
// 5.控制labelWhidth的属性


// dialog使用说明
// 属性：
// 1.visible:Boolean
// 2.dialogFormData:Object 表单的数据{name:{label:'item的描述'，value""对应的值"}}
// 3.formLabelWidth：String label的宽度
// 4.title：String dialog的标题

// 事件：
// validateSuccess 点击确定按钮，表单验证通过之后触发，回传一个form实例引用
// dialogCancel 点击取消按钮 触发事件
// closed dislog 被关闭的时候触发的事件
let props = defineProps({
  title: {
    type: String,
    default() {
      return '增加学员信息'
    }
  },
  // 控制表单显示隐藏
  visible: {
    type: Boolean,
    default() {
      return false
    }
  },

  // 弹窗表单中的数据来源
  dialogFormData: {
    type: Object,
    default() {
      return []
    }
  },
  formLabelWidth: {
    type: String,
    default() {
      return '140px'
    }
  }
})


// 声明表单校验通过之后的回调
let emits = defineEmits(['validateSuccess', 'dialogCancel', 'closed'])


// 控制显示隐藏的初始值，定义为传递下来的初始值
let dialogFormVisible = ref(false)

// 使用watchEffect侦听visible的变化
let { visible } = toRefs(props)
watchPostEffect(() => {
  dialogFormVisible.value = visible.value
})



// 声明取消和确定的方法
// 点击取消
let cancel = () => {
  emits('dialogCancel',)
}

// 点击确定
let dialogForm = ref()
let confirm = (form) => {
  console.log(111)
  form.validate(valid => {
    if (valid) {
      // 表单校验通过
      emits('validateSuccess', dialogForm)
    } else {
      // 表单校验不通过
      console.log(111)
    }
  })
}

// dialog被关闭的时候触发的事件
let close = () => {
  emits('closed')
}

</script>
<style scoped>

</style>